<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>

  <body></body>
  <script>
    // 普通数据源：
    var arr = [
      { id: '1', name: '北京', pid: '' },
      { id: '11', name: '朝阳', pid: '1' },
      { id: '111', name: '朝阳群众1', pid: '11' },
      { id: '112', name: '朝阳群众2', pid: '11' },
      { id: '12', name: '顺义', pid: '1' },
      { id: '121', name: '顺义群众1', pid: '12' },
      { id: '122', name: '顺义群众2', pid: '12' },
      { id: '2', name: '深圳', pid: '' },
      { id: '21', name: '南山', pid: '2' },
      { id: '211', name: '南山群众1', pid: '21' },
      { id: '212', name: '南山群众2', pid: '21' },
      { id: '22', name: '宝安', pid: '2' },
      { id: '221', name: '宝安群众1', pid: '22' },
      { id: '222', name: '宝安群众2', pid: '22' }
    ]
    // 思路：数据一共分为三层：
    //  一级：pid = ""
    //  二级：pid = "一级 id"
    //  三级: pid = "二级 id"
    //  四级：
    //  ....
    // 定义一个新的数组
    var newArr = []
    arr.forEach(item1 => {
      // 第一层
      if (item1.pid === '') {
        let children1 = []
        arr.forEach(item2 => {
          // 第二层
          if (item2.pid === item1.id) {
            let children2 = []
            arr.forEach(item3 => {
              // 第三层
              if (item3.pid === item2.id) {
                children2.push(item3)
              }
            })
            item2.children = children2
            children1.push(item2)
          }
        })
        item1.children = children1
        newArr.push(item1)
      }
    })
    console.log(newArr)
    // // 先得到一级数据
    // arr.forEach(item1 => {
    //   if (item1.pid === '') {
    //     // 只要进入判断 item1 就是一级
    //     // 定义一个一级的 children
    //     var children1 = []
    //     // 再找到当前一级下的二级元素
    //     arr.forEach(item2 => {
    //       if (item2.pid === item1.id) {
    //         // 只要进入判断 item2 就是二级
    //         // 定义一个二级的 children
    //         var children2 = []
    //         // 再找到当前二级下的三级元素
    //         arr.forEach(item3 => {
    //           if (item3.pid === item2.id) {
    //             // 三级元素
    //             children2.push(item3)
    //           }
    //         })
    //         // 将三级添加到二级中
    //         item2.children = children2
    //         children1.push(item2)
    //       }
    //     })
    //     // 将二级添加到一级中
    //     item1.children = children1
    //     // 将一级添加到数据组中
    //     newArr.push(item1)
    //   }
    // })
    // 目标：
    // var arr = [
    //   {
    //     id: '1', name: '北京', pid: '', children: [
    //       {
    //         id: '11', name: '朝阳', pid: '1', children: [
    //           { id: '111', name: '朝阳群众1', pid: '11' },
    //           { id: '112', name: '朝阳群众2', pid: '11' },
    //         ]
    //       },
    //       {
    //         id: '12', name: '顺义', pid: '1', children: [
    //           { id: '121', name: '顺义群众1', pid: '12' },
    //           { id: '122', name: '顺义群众2', pid: '12' },

    //         ]
    //       },
    //     ]
    //   }
    // ]
  </script>
</html>
